<template>
  <div class="main" >
    <el-tabs>
      <div class="chartsStyle">
        <div class="chart-title">
          <tr style="height: 30px; ">
            <td>
              <el-switch
                v-model="isShowX"
                active-text="显示x轴分割线"
                inactive-text="不显示">
              </el-switch></td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">x轴分割线颜色</span>
              <el-color-picker v-model="lineColorX"  ></el-color-picker>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">x轴分割线类型</span>
              <el-select v-model="lineTypeX" clearable placeholder="请选择" size="mini" style="width: 120px;margin-left: 9px " >
                <el-option
                  v-for="item in optionsLineTypeX"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">x轴分割线粗细</span>
              <el-input-number v-model="lineWidthX" @change="setLineWidthX" :min="1" :max="4"  size="mini" style="width: 120px;margin-left: 9px "  label="描述文字">
              </el-input-number>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td>
              <el-switch
                v-model="isShowY"
                active-text="显示y轴分割线"
                inactive-text="不显示">
              </el-switch></td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">y轴分割线颜色</span>
              <el-color-picker v-model="lineColorY"  style="margin-left: 15px" ></el-color-picker>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">y轴分割线类型</span>
              <el-select v-model="lineTypeY" clearable placeholder="请选择" size="mini" style="width: 120px;margin-left: 9px "  >
                <el-option
                  v-for="item in optionsLineTypeY"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">y轴分割线粗细</span>
              <el-input-number v-model="lineWidthY" @change="setLineWidthY" :min="1" :max="4"  size="mini" style="width: 120px;margin-left: 9px "  label="描述文字">
              </el-input-number>
            </td>
          </tr>
          <br/>

        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>

export default {
  data () {
    return {
      isShowX: true, // x轴分割线
      isShowY: true, // y轴分割线
      lineColorX: '#c6c5ca', // x轴分割线颜色
      lineColorY: '#c6c5ca', // y轴分割线颜色
      lineTypeX: 'solid', // x轴分割线类型 实线：'solid'  线虚线：'dashed' 点虚线'dotted'
      lineTypeY: 'solid', // 轴分割线类型 实线：'solid'  线虚线：'dashed' 点虚线'dotted'
      lineWidthX: '1', // x轴分割线粗细
      lineWidthY: '1', // y轴分割线粗细

      optionsLineTypeX: [{
        value: 'solid',
        label: '实线'
      }, {
        value: 'dashed',
        label: '短线虚线'
      }, {
        value: 'dotted',
        label: '点虚线'
      }],
      optionsLineTypeY: [{
        value: 'solid',
        label: '实线'
      }, {
        value: 'dashed',
        label: '短线虚线'
      }, {
        value: 'dotted',
        label: '点虚线'
      }]
    }
  },
  methods: {
    setLineWidthX (val) {
      console.log('设置x轴分割线粗细为' + val)
      this.$store.state.grid.lineWidthX = val
    },
    setLineWidthY (val) {
      this.$store.state.grid.lineWidthY = val
    },
    GenNonDuplicateID () { // 产生一个随机的不重复的id
      return Math.random().toString(36).substr(3)
    }
  },

  watch: {
    isShowX (val) {
      this.$store.state.grid.isShowX = val
      console.log('设置是否显示x轴分割线' + val)
    },
    isShowY (val) {
      console.log('设置是否显示y轴分割线' + val)
      this.$store.state.grid.isShowY = val
    },
    lineColorX (val) {
      console.log('设置x轴分割线颜色' + val)
      this.$store.state.grid.lineColorX = val
    },
    lineColorY (val) {
      this.$store.state.grid.lineColorY = val
    },
    lineTypeX (val) {
      this.$store.state.grid.lineTypeX = val
    },
    lineTypeY (val) {
      this.$store.state.grid.lineTypeY = val
    }
  },
  beforeMount () {
    this.id = Math.random().toString(36).substr(3)
  }
}
</script>

<style lang="scss" scoped>
  .main{
    background-color: #E6E3E3;
  }
  /*.nature{
    font-size: 17px;
    font-weight:bold;

  }*/

</style>
